<template>
  <div>
    <!-- 设置新密码 -->
    <form class="pwd-container">
      <div class="login-mode">
        <span>验证码：</span>
        <input type="text" name="email" class="content-input" placeholder="请输入验证码">
      </div>
      <div class="login-mode" style="margin-bottom: 0;">
        <span>新密码：</span>
        <input type="text" name="phone" class="content-input" placeholder="请输入密码">
      </div>
      <p class="pwd-tip">提示: 密码为6~32位的数字与字母或者符号的组合</p>
      <div class="login-mode">
        <span>确认密码：</span>
        <input type="text" name="phone" class="content-input" placeholder="请输入确认密码">
      </div>
      <div class="next-btn" @click="popup">下一步</div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'NewPassword',
  data() {
    return {

    }
  },
  mounted() {
    // 修改页面进度条样式
    this.$bus.$emit('changeStep', 'two')
  },
  methods: {
    // 通过事件总线显示弹窗或跳转
    popup() {
      // this.$bus.$emit('popupContent', '手机号不能为空')
      this.$router.replace('/login/password/pwdsuccess')
    }
  }
}
</script>

<style lang='less' scoped>
.pwd-container {
  width: 513px;
  margin: 0 auto;

  .login-mode {
    display: inline-block;
    position: relative;
    left: 45%;
    transform: translateX(-50%);
    margin-bottom: 12px;

    label,
    input,
    span {
      font-size: 16px;
      color: #333;
    }

    span {
      width: 80px;
      text-align: right;
      display: inline-block;
    }

    label {
      margin-right: 20px;
    }

    input {
      margin-right: 4px;

      &:focus {
        border: 2px solid #000;
      }
    }

    .content-input {
      width: 304px;
      height: 44px;
      border-radius: 6px;
      border: 1px solid #eee;
      padding-left: 14px;
      background-color: #fff;
      outline: none;
    }
  }

  .pwd-tip {
    font-size: 16px;
    color: #333;
    padding-left: 125px;
    padding-top: 5px;
    margin-bottom: 12px;
  }

  .next-btn {
      width: 218px;
      display: block;
      margin: 15px auto;
      margin-top: 0;
      border-radius: 6px;
      background-color: #0047ae;
      color: #fff;
      font-weight: bold;
      line-height: 39px;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
    }
}
</style>